<template>
  <div class="question">
    <VHtml
      tag="div"
      class="question-title rich-txt"
      :html="question.QuestionName"
    />
    <div class="question-analysis">
      <div class="question-answer">
        <div class="question-prompt-test">
          答案
        </div>
        <VHtml
          tag="span"
          class="do-normal rich-txt"
          :html="question.Answer"
        />
      </div>
      <div v-if="shouldShowAnswer">
        <div class="question-answer">
          <div class="question-prompt-test">
            试题解析
          </div>
          <VHtml
            tag="span"
            class="do-normal rich-txt"
            :html="question.Analysis || '暂无解析'"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    shouldShowAnswer: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      difficultys: ['无', '简单', '一般', '困难'],
    }
  },
})
</script>
<style lang="scss" scoped>
.question {
  margin: 30px 40px;
  text-align: left;
}
.question-title {
  font-size: 30px;
  color: #333333;
  text-align: left;
  margin-bottom: 40px;
}
.question-analysis {
  margin-top: 80px;
}
.question-answer {
  margin-bottom: 40px;
}
.question-prompt-test {
  color: #9A9A9A;
  font-size: 30px;
}
.do-normal {
  color: #666;
  font-size: 30px;
  margin-top: 20px;
}
.rich-txt {
  word-wrap: break-word;
  word-break: break-all;
  overflow: auto;
  /deep/ img {
    max-width: 100%;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.no-point {
  margin-left: 20px;
}
.point {
  color: #63A2ED;
  font-size: 40px;
  list-style: disc;
  margin-left: 40px;
}
.circle-text {
  color: #666;
  font-size: 30px;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
